<!-- 

2. Тянем-потянем

Но если бы всё ограничивалось простым рисованием изображением, то отдельную статью можно было бы не писать, а ограничиться подпунктом «Изображения» в предыдущем посте. 
Итак теперь мы попытаемся масштабировать изображение и для этого существует ещё один способ вызова функции drawImage: 


drawImage(image, x, y, width, height)  //  параметры width, height меняют ширину и высоту изображения

 

Возьмём предыдущий пример и внесём в drawImage некоторые изменения: 
ctx.drawImage(pic, 0, 0, 300, 150);

============================================================================================================


3. Рисуем фрагмент изображения

Третий вызов drawImage с восемью параметрами, выглядит приблизительно так: 
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

// Первый параметр указывает то, какое изображение обрабатывать

// sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике

// dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте

Возьмём всё тот же пример и подкорректируем функцию drawImage в третий раз: 
ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110);

-->

<html>

<META charset='UTF8'>

<head>

  <title>imgExample</title>

</head>

<body>

  <canvas id='example'>Обновите браузер</canvas>

  <script>

    var example = document.getElementById("example");

    var ctx = example.getContext('2d');  // Контекст холста

    var pic = new Image();  // "Создаём" изображение

    pic.src = 'http://habrahabr.ru/i/nocopypast.png';  // Источник изображения, позаимствовано на хабре

    pic.onload = function() {  // Событие onLoad, ждём момента пока загрузится изображение

//    ctx.drawImage(pic, 0, 0);  // Рисуем изображение от точки с координатами 0, 0
//    ctx.drawImage(pic, 0, 0, 300, 150);
      ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110);

    }

  </script>

</body>

</html>
